<template>
	<div ref="machineStopTimeRanking" v-resize="onSize" style="height: 100%;">
		<jk-ranking
			unit="分"
			type="warning"
			:param-data="chartData"
			val-key="stopMinute"
			label-key="machineCode"
		></jk-ranking>
	</div>
</template>

<script>

    import domResizeMixin from '../../../../../mixins/dom-resize';
    import {
        reportProductionHomeDataMachineStopTimeTop
    } from '../../../../../api/production/kanBan';
    import jkRanking from '../jk-ranking/index';
    export default {
        name: 'MachineStopTimeRanking', // 机台停机时长排行
        mixins: [domResizeMixin],
        components: {
            jkRanking
        },
        props: {
            paramData: {
                type: Object,
                default() {
                    return {};
                }
            },
            refreshData: {
                type: [Number, String],
                default: ''
            },
            workshopId: {
                type: Number,
                default: null
            },
            processCode: {
                type: String,
                default: 'XS'
            }
        },
        data() {
            return {
                chartData: [],
                cardHeight: 0,
                dataList: [],
                borderColor: '#c5c8ce'
            };
        },
        methods: {
            onSize() {
                this.cardHeight = this.$refs.machineStopTimeRanking.clientHeight;
            },
            // 判断数据是否变化
            dataIsChange(newVal = [], oldVal = []) {
                if (newVal.length && oldVal.length) {
                    const len = newVal.length;
                    let isDiff = false;
                    for (let i = 0; i <= len - 1; i++) {
                        if (newVal[i].runningEfficiency !== oldVal[i].runningEfficiency) {
                            isDiff = true;
                        }
                    }
                    if (isDiff) {
                        this.chartData = JSON.parse(JSON.stringify(newVal));
                    }
                } else {
                    this.chartData = JSON.parse(JSON.stringify(newVal));
                }
            },
            getDataRequest() {
                if (!this.workshopId) return false;
                return reportProductionHomeDataMachineStopTimeTop({
                    workshopId: this.workshopId,
                    processCode: this.processCode
                }).then(res => {
                    if (res.data.status === 200) {
                        this.dataList = res.data.res;
                    }
                });
            }
        },
        mounted() {
            this.cardHeight = this.$refs.machineStopTimeRanking.clientHeight;
        },
        watch: {
            refreshData: {
                handler() {
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            },
            dataList: {
                handler(newVal, oldVal) {
                    this.dataIsChange(newVal || [], oldVal || []);
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
